<template>
  <div class="tree-box">
    <MForm
      :fields="fields"
      @submit="search"
      @cancel="search"
      class="search"
      submitIcon="icon-search"
      cancelIcon="icon-refreshLeft"
    >
      <!--<template #extra>-->
      <!--  <el-button type="primary" @click="exportHtmlToWord">导出</el-button>-->
      <!--</template>-->
    </MForm>
    <MTable
      :columns="columns"
      :http="eventSendPage"
      :params="params"
      v-model:isReload="isReload"
      v-model:selectKeys="selectKeys"
      displayFormat="list"
      rowKey="sorgRiskId"
      height="calc(100vh - 350px)"
    >
      <template #风险级别="{ row }">
        <img
          src="@/assets/imgs/spotCheck/y1.png"
          class="grade"
          v-if="row.riskLevel === '一级'"
        />
        <img
          src="@/assets/imgs/spotCheck/y2.png"
          class="grade"
          v-if="row.riskLevel === '二级'"
        />
        <img
          src="@/assets/imgs/spotCheck/y3.png"
          class="grade"
          v-if="row.riskLevel === '三级'"
        />
      </template>
      <template #状态="{ row }">
        <div class="tag-status" v-if="row.sendState === 0">
          <span class="warning">未推送</span>
        </div>
        <div class="tag-status" v-if="row.sendState === 1">
          <span class="">已推送</span>
        </div>
      </template>
      <template #actions="{ row }">
        <MSvgIconTooltip
          name="handle"
          content="推送"
          :disabled="row.sendState === 1"
          @click="row.sendState === 1 ? '' : toHandle([row.sorgRiskId])"
          v-if="$checkAuth('riskWarningHandle')"
        ></MSvgIconTooltip>
      </template>
    </MTable>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted, h } from 'vue'
import { columns, fields, dialogFields } from './config'
import { logExport, logList } from '@/api/system/logManagement'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  getManagerChild,
  riskChange,
  riskLedger,
  eventSendPage,
  riskTypeSortRisk,
  soptCheckLedger,
  eventSend
} from '@/api/spotCheck/spotCheck'

const router = useRouter()
defineOptions({
  name: 'logManagement'
})

onMounted(async () => {
  //问题类型
  // getManagerChild('theTypeOfProblemRisk').then((res) => {
  //   fields.value.find((i) => i.key === 'riskType').attrs.options = res.data.map(
  //     (i) => ({
  //       value: i.name,
  //       label: i.name,
  //       riskLevel: i.relationParameterName
  //     })
  //   )
  // })
  riskTypeSortRisk().then((res) => {
    fields.value.find((i) => i.key === 'riskType').attrs.options = res.data.map(
      (i) => ({
        value: i.name,
        label: i.name
      })
    )
  })
})

// 搜索
const params = ref<any>({})
const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
}

// 删除
const selectKeys = ref<number[]>([])
const clearSelectKeysReload = () => {
  selectKeys.value = []
  reload()
}

// 重载
const isReload = ref(true)
const reload = () => {
  isReload.value = true
}

const openDialog = () => {
  dialogVisible.value = true
}

const options = ref([
  {
    label: '主题1',
    value: 1
  },
  {
    label: '主题2',
    value: 2
  },
  {
    label: '主题3',
    value: 3
  }
])

// 新增/编辑
const dialogVisible = ref(false)

const viewInfo = ref({})
const view = (row) => {
  viewInfo.value = row
  dialogVisible.value = true
}

//导出
const exportHtmlToWord = () => {
  logExport().then((data) => {
    // const blob = new Blob([data], { type: 'application/excel;charset=UTF-8' })
    // const a = document.createElement('a')
    // const URL = window.URL || window.webkitURL
    // const herf = URL.createObjectURL(blob)
    // a.href = herf
    // a.download = '报告.docx'
    // document.body.appendChild(a)
    // a.click()
    // document.body.removeChild(a)
    // window.URL.revokeObjectURL(herf)
  })
}

//新增
const add = (id = undefined) => {
  if (id > 0) {
    router.push({
      name: 'riskWarningAdd',
      query: {
        id
      }
    })
  } else {
    router.push({
      name: 'riskWarningAdd'
    })
  }
}

const toDetail = (id) => {
  router.push({
    name: 'riskWarningView',
    query: {
      id
    }
  })
}

const toHandle = (ids) => {
  eventSend({ id: ids, type: 0 }).then(() => {
    ElMessage.success('推送成功！')
    reload()
  })
}

const open = () => {
  ElMessageBox.confirm(
    '至少选中一条数据，否则系统讲按列表所有数据生成',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {})
    .catch(() => {})
}

//转入协同治理
const shiftToCollaborativeGovernance = (sorgRiskId) => {
  ElMessageBox.confirm('确定要将该风险转入协同治理吗？', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      riskChange({ sorgRiskId }).then((res) => {
        reload()
      })
    })
    .catch(() => {})
}

const generateLedgersHttp = (ids = []) => {
  riskLedger({ ids: ids.join(',') }).then((res) => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '风险预警台账.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
  })
}
//生成台账
const generateLedgers = () => {
  if (selectKeys.value.length === 0) {
    ElMessageBox.confirm(
      h('div', [
        h('div', '至少选中一条数据，否则系统'),
        h('div', '将按照列表所有数据生成')
      ]),
      '温馨提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
      .then(() => {
        generateLedgersHttp()
      })
      .catch(() => {})
  } else {
    generateLedgersHttp(selectKeys.value)
  }
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  .nodeBox {
    width: 100%;
    height: 80vh;
    overflow-x: auto;
    cursor: all-scroll;
  }
  .showLevel {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.dialog-row {
  width: 100%;
  .dialog-col {
    width: 100%;
    display: flex;
    .dialog-col-serialNumber {
      color: #333;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      font-weight: bold;
      margin-right: 20px;
    }
    .dialog-col-rig {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(237, 237, 237, 1);
      margin-bottom: 20px;
      padding-bottom: 20px;
      .dialog-col-rig-content {
        .dialog-col-rig-content-title {
          font-size: 13px;
          color: #666;
          margin-bottom: 20px;
        }
        .dialog-col-rig-content-form {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}
.btns {
  display: flex;
  flex-direction: row-reverse;
}
.ml-20 {
  margin-left: 20px;
}
.ml-12 {
  margin-left: 12px;
}
:deep(.search .el-form-item__label) {
  width: 72px !important;
}
.grade {
  width: 27px;
  height: 27px;
}
.btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  flex-direction: row;
}
</style>
